<template>
	<div class="author">
		<a class="video-name" :href="'https://www.bilibili.com/video/'+author.bvid" target="_blank">{{author.name}}</a>
		<a class="video-author" :href="'https://space.bilibili.com/'+author.authorId" target="_blank">
			<span class="icon-box"><Icon type="up" :styles="{transition: '0s'}"/></span>
			{{author.author}}
		</a>
	</div>
</template>

<script>
export default{
	props:{
		author:{
			type: Object,
			required: true
		}
	}
}
</script>

<style scoped lang="less">
.author{
	.video-name{
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 14px;
		height: 40px;
		line-height: 20px;
		padding-top: 10.5px;
		margin-bottom: 7.5px;
		transition: color .3s;
		&:hover{
			color: var(--cblue);
		}
	}
	.video-author{
		display: flex;
		align-items: center;
		height: 16px;
		font-size: 12px;
		color: var(--c9);
		transition: color .3s;
		.icon-box{
			margin-right: 5px;
			font-size: 16px;
		}
		&:hover{
			color: var(--cblue);
		}
	}
}
</style>
